import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from 'react-router-dom';

import Home from '../home/Home';
import About from '../about/About';
import Contact from '../contact/Contact';
import './App.css'

function App() {
    return (
        <div className={'container'}>
            <Router>
                <Routes>
                    <Route path="/" element={<Home/>}/>
                    <Route path="/about" element={<About/>}/>
                    <Route path="/contact" element={<Contact/>}/>
                </Routes>
                <div className={'absolute inset-x-0 top-0 h-16'}>
                    <nav>
                        <ul className={'grid gap-4 grid-cols-3'}>
                            <li>
                                <Link to="/">Home</Link>
                            </li>
                            <li>
                                <Link to="/about">About</Link>
                            </li>
                            <li>
                                <Link to="/contact">Contact</Link>
                            </li>
                        </ul>
                    </nav>
                </div>

            </Router>
        </div>
    );
}

export default App
